<div ng-if="agent">
    <div ng-if="tab !== 'welcome' && agent && agent.status !== 'never_connected'">
        <react-component name="MainModule" props="{agent, section: tab, disabledReport: resultState !== 'ready', cardsProps: getWelcomeCardsProps(resultState), goGroups: goGroups, exportConfiguration: exportConfiguration}" ></react-component>
    </div>
    <div ng-if='!loadingDashboard'>
        <div ng-show='(showModuleDashboard || showModuleEvents || showMitre) && showModuleDashboard !== "welcome"'>
            <div ng-class="{'no-opacity': !moduleDiscoverReady}">
                <kbn-dis class='hide-filter-control'></kbn-dis>
            </div>
        </div>
    </div>

    <div ng-if="tab === 'mitre' && showMitre">
        <react-component name="Mitre" ></react-component>
    </div>

    <!-- Loading status section -->
    <div ng-if="tabView === 'panels' && !showMitre && showModuleDashboard && !rendered && resultState !== 'none'"
        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive">
        <div class="euiFlexItem euiFlexItem--flexGrowZero euiTextAlign euiTextAlign--center">
            <div class="euiSpacer euiSpacer--m"></div>
            <span class="euiLoadingChart euiLoadingChart--large">
                <span class="euiLoadingChart__bar"></span>
                <span class="euiLoadingChart__bar"></span>
                <span class="euiLoadingChart__bar"></span>
                <span class="euiLoadingChart__bar"></span>
            </span>
            <div class="euiSpacer euiSpacer--m"></div>
            <div class="percentage">{{loadingStatus}}</div>
        </div>
    </div>
    <!-- End loading status section -->
    <!-- Report status section -->
    <div ng-if="reportBusy && reportStatus && showModuleDashboard"
        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive">
        <div class="euiFlexItem euiFlexItem--flexGrowZero euiTextAlign euiTextAlign--center">
            <div class="euiSpacer euiSpacer--m"></div>
            <span class="euiLoadingChart euiLoadingChart--large">
                <span class="euiLoadingChart__bar"></span>
                <span class="euiLoadingChart__bar"></span>
                <span class="euiLoadingChart__bar"></span>
                <span class="euiLoadingChart__bar"></span>
            </span>
            <div class="euiSpacer euiSpacer--m"></div>
            <div class="percentage">{{reportStatus}}</div>
            <div class="euiSpacer euiSpacer--l"></div>
        </div>
    </div>
    <!-- No results section -->
    <div layout="row" class="wz-margin-top-10 wz-margin-right-8 wz-margin-left-8"
    ng-if="tab !== 'welcome'" ng-show="resultState === 'none' && tabView === 'panels' && showModuleDashboard">
    <react-component flex name="EuiCallOut" props="{color:'warning',iconType:'help', title:'There are no results for selected time range. Try another
        one.'}" ></react-component>
    </div>

    <!-- End report status section -->
    <div ng-if="tab && tab!=='welcome'" ng-show="resultState !== 'none'">
        <div ng-class="{'no-opacity': !moduleDiscoverReady}">
            <react-component ng-show='showModuleDashboard' name="WzVisualize"
                props="{selectedTab: tab, isAgent: true}" ></react-component>
        </div>
    </div>
</div>